<template>
  <page-header-wrapper padding="24px">
    <div class="evidence">
      <wx-icon iconName="car"/>
      <div style="background: white;">
        <a-tabs v-model="tabKey" @tabClick="handleTab">
          <a-tab-pane key="1" tab="报警明细"></a-tab-pane>
          <a-tab-pane key="2" tab="报警证据"></a-tab-pane>
        </a-tabs>
      </div>
      <a-card :bordered="false">
        <div class="search-container">
          <a-form layout="inline">
            <a-form-item label="横屏个数">
              <a-select
                default-value="1"
                v-model="horizontalCount"
                @change="handleHorizontal"
                style="width: 60px"
              >
                <a-select-option value="7">
                  7
                </a-select-option>
                <a-select-option value="6">
                  6
                </a-select-option>
                <a-select-option value="5">
                  5
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="竖屏个数">
              <a-select
                style="width: 60px"
                v-model="verticalCount"
              >
                <a-select-option :value="item" v-for="item in 5" :key="item">
                  {{ item }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="分辨率">
              <a-select default-value="0" style="width: 105px">
                <a-select-option value="0">
                  满画面
                </a-select-option>
                <a-select-option value="1">
                  2：1显示
                </a-select-option>
                <a-select-option value="2">
                  16：9显示
                </a-select-option>
                <a-select-option value="3">
                  4：3显示
                </a-select-option>
                <a-select-option value="4">
                  1：1显示
                </a-select-option>
                <a-select-option value="5">
                  3：4显示
                </a-select-option>
                <a-select-option value="6">
                  9：16显示
                </a-select-option>
                <a-select-option value="7">
                  1：2显示
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item>
              <a-button
                @click="toFullscreen"
              >
                全屏
              </a-button>
            </a-form-item>
          </a-form>
        </div>
      </a-card>
      <div
        ref="listContainer"
        class="list-container"
        :style="`display: grid;grid-template-rows: repeat(${verticalCount} , ${100/verticalCount}%);grid-template-columns: repeat(${horizontalCount} , ${100/horizontalCount}%);`"
      >
        <div
          v-for="(item) in verticalCount * horizontalCount"
          :key="item"
          class="list-item"
        >
        </div>
      </div>
    </div>
  </page-header-wrapper>
</template>

<script>
// import './Lists.less'
// import DPlayer from '@/components/dplayer'
// import DPlayer from 'dplayer'
// import Detail from './Detail'
export default {
  data () {
    return {
      tabKey: '2',
      detailVisible: false,
      horizontalCount: 7,
      verticalCount: 4,
      listwidth: '200px',
      listHeight: '0px',
      dplayerList: []
      // listHeight: '500px'
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.calcListItemHeight()
    })
  },
  methods: {
    handleTab (index) {
      if (parseInt(index) === 1) {
        this.$router.push({ name: 'MoniterCenterAlarmRecord', query: { refresh: true } })
      }
      if (parseInt(index) === 2) {
        this.$router.push({ name: 'MoniterCenterAlertEvidence', query: { refresh: true } })
      }
    },
    toFullscreen () {
      this.$refs.listContainer.requestFullscreen().then(res => {
        console.log(res)
      }).catch(e => {
        console.error('全屏失败')
      })
    },
    openDetail () {
      this.detailVisible = true
    },
    handleHorizontal (value) {
      this.horizontalCount = value
      this.calcListItemHeight()
    },
    calcListItemHeight () {
      this.$nextTick(() => {
        const clientWidth = document.getElementsByClassName('list-item')[0].clientWidth
        this.listHeight = clientWidth * 0.85 + 'px'
        const videoElementList = document.getElementsByClassName('list-item')
        console.log(videoElementList)
        this.dplayerList = []
        for (const index in videoElementList) {
          const element = videoElementList[index]
          const dp = new window.DPlayer({
            container: element,
            screenshot: false, // 截图
            mutex: false,
            autoplay: true,
            live: true,
            video: {
                url: 'http://192.168.1.201:7677/video/013644566663-2',
                type: 'flv'
            },
            contextmenu: [
              {
                text: 'custom1',
                link: 'https://github.com/DIYgod/DPlayer'
              },
              {
                text: 'custom2',
                click: (player) => {
                  console.log(player)
                }
              }
            ]
          })
          this.dplayerList.push(dp)
        }
      })
    }
  }
}
</script>

<style>
.dplayer-bar-wrap{
  /* dplayer 进度条 */
  display: none !important;
}
.dplayer-setting{
  /* dplayer setting图标 */
  display: none !important;
}
.dplayer-time{
  /* dplayer 播放器时间 */
  display: none !important;
}
</style>
<style lang="less" scoped>
@import url('./Evidence.less');
/deep/ .ant-tabs-nav{
  margin-left: 33px;
}
</style>
